<template>
    <div class="pic" :style="{'background-image':'url('+src+')'}">
        <!--S红包-->
        <red
                v-show="show_red"
                :red-id="redId"
                red-type="pic"
                :now-count="now_count"
                @loaded="loaded"
                @close="closeRed">
        </red>
        <!--E红包-->

        <!--周围背景--><around-bg></around-bg>


        <!--右下角操作按钮--><control :red-id="redId" :owner="owner"></control>

        <!--左下角信息--><left-bottom :data="data" v-if="data && data.status.status"></left-bottom>

        <!--S推广链接-->
        <link-btn v-if="link && show_red" :link="link"></link-btn>
        <!--E推广链接-->
    </div>
</template>

<script>
    import aroundBg from "../around-bg/AroundBg";
    import red from "../red/Red";
    import control from "../control/Control";
    import leftBottom from "../left-bottom/LeftBottom";
    import linkBtn from "../link-btn/LinkBtn";
    export default {
        name: "pic",
        data(){
          return {
              show_red:true, //是否显示红包
              data:null,  //红包数据
              owner:"",  //红包所属用户的uid
              now_count:-1,
              src:"",  //图片src地址
              link:null  //推广链接
          }
        },
        props:{
            redId:{
                type:String
            },
            /**
             * 当前的红包id,用于检测视频切换事件
             */
            changeRedId:{
                type:String
            }
        },
        components:{
            "around-bg":aroundBg,
            red,
            control,
            "left-bottom":leftBottom,
            "link-btn":linkBtn
        },
        watch:{
            //红包切换
            changeRedId(value){
                if(value !== this.redId){
                    this.now_count = 0;
                }else{
                    this.now_count = -1;
                }
            }
        },
        methods:{
            //红包数据加载完成
            loaded(data){
                this.src = data.src[0];
                this.data = data;
                this.owner = data.uid;
                if(data.link) this.link = data.link;
                if(data.status.status === 5){
                    this.show_red = false;
                }
            },
            //关闭红包
            closeRed(){
                this.data.status.status = 5;
                this.show_red = false;
            }
        }
    }
</script>

<style scoped lang="less" src="./pic.less"></style>